import React, { useEffect, useState } from 'react'
import { connect } from 'react-redux'
import { Dispatch, bindActionCreators } from 'redux'
import { RootState } from 'src/redux'
//ui
import { Descriptions, Button, Modal, Typography, Space } from 'antd';
import styles from './style.module.scss'
import './style.module.scss'
//comp/
import WordSource from '../../WordSource';
//state
import { WordSentenceState } from '../reducer';
import { WordSourceState } from '../../WordSource/reducer';
//action
import * as Action from '../reducer'
import * as WordSourceAction from '../../WordSource/reducer';
//util
import ConvertUtils, { StringObject } from '../../../utils/Convert';

const { Text } = Typography;

interface WordSentenceIndexState {
    wordSentenceListState: WordSentenceState;
    wordSourceState: WordSourceState;
    index: number;
    edit: typeof Action.edit;
    remove: typeof Action.remove;
    setCurrentIdInner: typeof WordSourceAction.setCurrentIdInner,
}

export const _WordSentence: React.SFC<WordSentenceIndexState> = (props) => {
    const {
        wordSourceState, wordSentenceListState,
        index,
        edit, remove, setCurrentIdInner } = props

    // const chi2 = '战斗机就不行啦！如果是双座战斗机还好，单座战斗机在飞行时，飞行员至少80%—90%的精力要保持飞行状态，剩余的精力才能用来进行作战协同。双机编队作战已经接近飞行员精力的极限了。作为长机，飞行时不是不用管僚机，而是每个动作都要考虑僚机的状态，做复杂动作前更是要摇晃机翼提醒僚机，僚机更要有大量精力用于跟队，看到长机外侧盘旋赶紧加油门压杆上升高度跟队，'
    // const eng2 = 'm trying to test my Spring MVC webapp with Spring test. It uses springmvc-router for routing and that appears to break the tests, which work fine when I use @RequestMapping instead of my routes.conf file.'

    const chi = ''
    const eng = ''
    const [engValue, setEngValue] = useState(eng);
    const [chiValue, setChiValue] = useState(chi);
    const [sourceId, setSourceId] = useState(0);
    const [sourceIdBackup, setSourceIdBackup] = useState(-1);
    const [sourcePath, setSourcePath] = useState('');
    const [modalVisible, setModalVisible] = useState(false);

    useEffect(() => {
        if (sourceId) {
            const str: StringObject = { value: '' };
            ConvertUtils.getPathToSun(wordSourceState.dto, str, "t" + sourceId.toString());
            setSourcePath(str.value.substring(0, str.value.length - 2))
        }
    }, [sourceId, wordSourceState.dto])

    useEffect(() => {
        if (wordSentenceListState.dto.dtos[index]) {
            setChiValue(wordSentenceListState.dto.dtos[index].chineseValue)
            setEngValue(wordSentenceListState.dto.dtos[index].englishValue)
            setSourceId(wordSentenceListState.dto.dtos[index].wordSourceId)
        }
    }, [wordSentenceListState.dto.dtos, index, wordSourceState.dto.key])

    useEffect(() => {
        //currentIdInner初始化的时候不改变
        //sourceinner -> myinner
        if (modalVisible && wordSourceState.currentIdInner) {
            setSourceId(wordSourceState.currentIdInner)
        }
    }, [modalVisible, wordSourceState.currentIdInner])

    useEffect(() => {
        if (modalVisible) {
            setSourceIdBackup(sourceId)
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [modalVisible])

    return (
        <div className='descriptionsItem'>
            <Descriptions bordered size='small' className={styles.descs}>
                <Descriptions.Item label="英文" span={3} className={styles.desc}>
                    <Text editable={{
                        onChange: (str) => setEngValue(str)
                    }}>{engValue}</Text>
                </Descriptions.Item>
                <Descriptions.Item label="中文" span={3} className={styles.desc}>
                    <Text editable={{
                        onChange: (str) => setChiValue(str)
                    }}>{chiValue}</Text>
                </Descriptions.Item>
                <Descriptions.Item label="来源" span={3} className={styles.desc}>
                    <Space>
                        <Button onClick={() => setModalVisible(true)}>修改来源</Button>
                        <Text>{sourcePath}</Text>
                    </Space>
                </Descriptions.Item>
                <Descriptions.Item label="操作" span={3} className={styles.desc}>
                    <Space>
                        <Button onClick={() => {
                            edit({
                                chineseValue: chiValue,
                                englishValue: engValue,
                                wordSentenceId: wordSentenceListState.dto.dtos[index].wordSentenceId,
                                wordSourceId: sourceId
                            })
                        }}>保存修改</Button>
                        <Button onClick={() => {
                            remove(wordSentenceListState.dto.dtos[index].wordSentenceId)
                        }}>删除</Button>
                    </Space>
                </Descriptions.Item>
            </Descriptions>

            <Modal
                title={<div>选择来源</div>}
                visible={modalVisible}
                onOk={() => {
                    setModalVisible(false)
                    //关闭currentIdInner
                    setCurrentIdInner(null)
                }}
                onCancel={() => {
                    setModalVisible(false)
                    //关闭currentIdInner
                    setCurrentIdInner(null)
                    setSourceId(sourceIdBackup)
                }}
                okText="选择"
                cancelText="取消"
            >
                <WordSource outerSettedId={sourceId}
                />
                <Text>{sourcePath}</Text>
            </Modal>
        </div >
    )
}



const mapStateToProps = (state: RootState) => ({
    wordSourceState: state.WordSourceState,
    wordSentenceListState: state.WordSentenceState,
    mainInfoState: state.MainInfoState,
})

const mapDispatchToProps = (dispatch: Dispatch) => bindActionCreators({
    edit: Action.edit,
    add: Action.add,
    remove: Action.remove,
    setCurrentIdInner: WordSourceAction.setCurrentIdInner,
}, dispatch);

/**
 * 得到当前过滤器并渲染 Link。
 */
const WordSentenceIndex = connect(
    mapStateToProps,
    mapDispatchToProps
)(_WordSentence)

export default WordSentenceIndex